<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="app">
    <!-- 患者留言区 -->
    <div v-if="userRole === 'PATIENT'">
        <textarea v-model="newMessage"></textarea>
        <button @click="submitMessage">提交留言</button>
        <div v-for="msg in messages">
            {{ msg.content }} - 回复：{{ msg.reply || '暂无' }}
        </div>
    </div>

    <!-- 管理员回复区 -->
    <div v-if="userRole === 'ADMIN'">
        <h3>未回复留言</h3>
        <div v-for="msg in unrepliedMessages" :key="msg.id" class="mb-3">
            <p>患者：{{ msg.patient.username }} - {{ msg.content }}</p>
            <input v-model="msg.replyText" class="form-control">
            <button @click="reply(msg.id)" class="btn btn-sm btn-primary mt-2">回复</button>
        </div>
    </div>

    <script>
        new Vue({
        el: '#app',
        data: {
        newMessage: '',
        messages: [],
        unrepliedMessages: [],
        replyText: '',
        userRole: '' // 通过接口获取用户角色
    },
        mounted() {
        this.fetchUserRole();
        this.loadMessages();
    },
        methods: {
        fetchUserRole() {
        axios.get('/api/user/role')
        .then(res => this.userRole = res.data);
    },
        loadMessages() {
        if(this.userRole === 'PATIENT') {
        axios.get('/patient/messages')
        .then(res => this.messages = res.data);
    } else if(this.userRole === 'ADMIN') {
        axios.get('/admin/messages/unreplied')
        .then(res => this.unrepliedMessages = res.data);
    }
    },
        submitMessage() {
        if(!this.newMessage.trim()) return;
        axios.post('/patient/message', {content: this.newMessage})
        .then(() => {
        this.newMessage = '';
        this.loadMessages();
    });
    },
        reply(messageId) {
        axios.post(`/admin/message/${messageId}/reply`, {
        reply: this.replyText
    }).then(() => {
        this.replyText = '';
        this.loadMessages();
    });
    }
    }
    });
</script>

</body>
</html>